import React from "react"
// import { connect, useDispatch, useSelector } from "react-redux";
import { connect, useDispatch, useSelector } from './redux/react-redux';
import actionCounter from "./store/actions/counter";
// function AppMiddleware(props) {
//     // const state = useSelector((state) => state)
//     // const dispatch = useDispatch()
//     const { state, dispatch } = props
//     console.log(props)
//     // const thunkAdd = () => {
//     //   debugger
//     //   //  actionCounter.thunkAdd1(1)
//     //   // console.log(actionCounter)
//     //   return function(dis) {
//     //     dispatch(actionCounter.add1())
//     //   }
//     // }
//     const thunkAdd = () => async (dispatch) => {
//       try {
//         const response = await fetch('https://api.example.com/data');
//         const data = await response.json();
//         dispatch(actionCounter.add1());
//       } catch (error) {
//         dispatch(actionCounter.add1());
//       }
//     };
//     return (
//       <>
//           <div>{state.counter.counter}</div>
//             <button onClick={() => dispatch(actionCounter.add1())}>+</button>
//             <button onClick={thunkAdd}>thunk+1</button>
//       </>
//     )
// }

class AppMiddleware extends React.Component {
  // redux-thunk的原始写法
  // 第一个dispatch = 中间件的action方法，即重写后的dispatch方式
  // 第二个dispatch是调用action方法传递过来的
  // thunkAdd1 = () => {
  //   const { state, dispatch } = this.props;
  //   dispatch((dispatch, getState) => {
  //     setTimeout(() => {
  //       dispatch(actionCounter.add1())
  //     }, 2000)
  //   })
  // }

  // 使用bindActionCreators包装，简化redux-thunk的原始写法，只调用一次dispatch
  thunkAdd1 = () => {
    const { state, dispatch, thunkAdd1 } = this.props;
    thunkAdd1(10)
  }
  render () {
    const { state, dispatch, promiseAdd1, promiseAdd2 } = this.props
    return (
      <>
      <div>{state.counter.counter}</div>
        <button onClick={() => dispatch(actionCounter.add1())}>+</button>
        <button onClick={this.thunkAdd1}>thunk+1</button>
        <button onClick={promiseAdd1}>promise+1</button>
        <button onClick={promiseAdd2}>promise+2</button>
      </>
    )
  }
}

function mapStateToProps(state) {
  return {
    state: {
      counter: state.counter,
      number: state.counter,
    }
  };
}
// function mapDispatchToProps(dispatch) {
//   return {
//     dispatch
//   }
// }
const mapDispatchToProps = actionCounter
export default  connect(mapStateToProps, mapDispatchToProps)(AppMiddleware);